<div class="main">
  <!--*****************大数据可视化***********************-->
  <div class="row">
    <!--左边-->
    <div class="left col-lg-3 col-md-3">
      <!--3d柱状图-->
      <div class="accumulation">
        <div class="accumulation-title title text-center">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <p>{{serviceZoneTitle}}业态数据3D统计</p>
        </div>
        <div class="accumulation-3Dbar" echarts [options]="options3d" (chartClick)="barClick($event)"></div>
        <div class="accumulation-3Dbar" echarts [options]="options3dCopy" (chartClick)="barCopyClick($event)"></div>
      </div>
      <!--移动端车流量-->
      <div class="income mobile">
        <p class="text-center">{{serviceZoneTitle}}今日实时收入</p>
        <div class="income-amount">
          <h3 class="text-center">
            <span>0</span>
            <span>0</span>
            <span>0</span>
            <span style="margin-right: 10px" *ngFor="let i of incomeAmount">{{i}}</span>
            <small style="font-size: 14px;color: white;">元</small>
          </h3>
        </div>
      </div>
      <!--车辆统计-->
      <div class="vehicle">
        <!--日车流量实时统计-->
        <div class="vehicle-amount">
          <div class="vehicle-amount-title title text-center">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <p>{{serviceZoneTitle}}今日车流量</p>
          </div>
          <div class="vehicle-amount-number">
            <p class="text-center">
              <span *ngFor="let i of vehicleAmount">{{i}}</span>
              <small>辆</small>
            </p>
          </div>
        </div>
        <!--车型日分布占比-->
        <div class="vehicle-pie">
          <div class="vehicle-pie-title title text-center">
            <p>{{serviceZoneTitle}}当日车型日分布类型占比分析</p>
          </div>
          <div class="vehicle-pie-chart" echarts [options]="optionsCarModel" (chartClick)="parkClick($event)"></div>
        </div>
      </div>
    </div>
    <!--中部-->
    <div class="center col-lg-6 col-md-6">
      <!--服务区商家业态数据及监控-->
      <div class="servicesMap">
        <div class="servicesMap-top">
          <div class="shop-info text-center" *ngFor="let item of incomeBottomData" (click)="openServiceShop(item)">
            <p [title]="item.name">
              <i class="fa fa-paw" aria-hidden="true"></i>
              <span>{{item.storeName}}</span>
            </p>
            <p [title]="item.num">1000元</p>
          </div>
        </div>
        <div class="first servicesMap-video">
          <div class="btn-group" *ngFor="let item of publicTopVideoGroup;let i = index" [ngClass]="{'open':videoTopOpen[i]}" (mouseover)="publicTopVideoGroupOver(item.cameras,i)" (mouseout)="publicTopVideoGroupLeave(i)">
            <span data-toggle="dropdown">{{item.groupName}}</span>
            <ul class="dropdown-menu">
              <li  *ngFor="let item of publicVideoList" (click)="openPublicVideo(item)">
                <a href="javascript:">
                  <i class="fa fa-video-camera" aria-hidden="true"></i>
                  {{item.cameraName}}
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="servicesMap-center text-center">
          <!--上行-->
          <span>{{serviceInfo?.downAttributeValues.source}}</span>
          <img src="assets/images/jiantou.png" alt="" style="height: 3vh;width: auto;">
          <!--下行-->
          <span>{{serviceInfo?.upAttributeValues.source}}</span>
        </div>
        <div class="second servicesMap-video">
          <div class="btn-group" *ngFor="let item of publicBottomVideoGroup;let i = index" [ngClass]="{'open':videoBottomOpen[i]}" (mouseover)="publicTopBottomGroupOver(item.cameras,i)" (mouseout)="publicTopBottomGroupLeave(i)">
            <span data-toggle="dropdown">{{item.groupName}}</span>
            <ul class="dropdown-menu">
              <li  *ngFor="let item of publicVideoList" (click)="openPublicVideo(item)">
                <a href="javascript:">
                  <i class="fa fa-video-camera" aria-hidden="true"></i>
                  {{item.cameraName}}
                </a>
              </li>
            </ul>
          </div>
         <!--  <span *ngFor="let item of publicBottomVideoList">
            {{item.groupName}}
          </span>-->
        </div>
        <div class="servicesMap-bottom">
          <div class="shop-info text-center" *ngFor="let item of incomeTopData" (click)="openServiceShop(item)">
            <p [title]="item.name">
              <i class="fa fa-paw" aria-hidden="true"></i>
              <span>{{item.storeName}}</span>
            </p>
            <p [title]="item.num">1000元</p>
          </div>
        </div>
      </div>
      <!--事件监控-->
      <div class="event-table">
        <!--未处理-->
        <div class="col-lg-6 col-md-6 event-table-untreated">
          <div class="event-table-untreated-title title text-center">
            <span></span><span></span><span></span><span></span>
            <p>未处理事件</p>
          </div>
          <p-scrollPanel [style]="{width: '100%', height: '30vh'}" styleClass="custom">
            <table class="table" cellspacing="5px">
              <thead class="table-header">
              <tr>
                <td>时间</td>
                <td>事件类型</td>
                <td>事件描述</td>
                <td>状态</td>
              </tr>
              </thead>
              <tbody class="table-body">
              <tr *ngFor="let item of eventList" (click)="openEventAlert(item)">
                <td>{{item?.occurTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td>{{item?.eventCategoryName}}</td>
                <td>{{item?.eventDescripte}}</td>
                <td style="color:#CF5B56">{{item?.processState===2?'未处理':'已处理'}}</td>
              </tr>
              </tbody>
            </table>
          </p-scrollPanel>
        </div>
        <!--事件上报/卫生间/停车位-->
        <div class="col-lg-6 col-md-6 event-table-processed">
          <div class="event-table-processed-title title text-center">
            <span></span><span></span><span></span><span></span>
            <p>事件上报</p>
          </div>
          <p-scrollPanel [style]="{width: '100%', height: '30vh'}" styleClass="custom">
            <div class="event-table-processed-type">
              <span *ngFor="let item of eventInfoUpTypes" [ngStyle]=" {'float': item.eventCategoryName === '党建类'?'right': 'none', 'margin-right': item.eventCategoryName === '党建类'?'5vw':'none'}" (click)="eventInfoUpClick(item)">{{item.eventCategoryName}}</span>
            </div>
            <div class="event-table-processed-btn">
              <div class="col-lg-6 col-md-6">
                <div class="btn-toilet" (click)="openServersToiletAlert('服务区卫生间使用率')">
                  <p>上行卫生间使用率</p>
                  <p class=""><span>男洗手间：45%</span></p>
                  <p><span>女洗手间：50%</span></p>
                </div>
                <div class="btn-carport" (click)="openServersToiletAlert('服务区停车位监控')">
                  <p>上行停车位数据监控</p>
                  <p class=""><span>大车剩余车位：256个</span></p>
                  <p><span>小车剩余车位：318个</span></p>
                </div>
              </div>
              <div class="col-lg-6 col-md-6">
                <div class="btn-toilet" (click)="openServersToiletAlert('服务区卫生间使用率')">
                  <p>上行卫生间使用率</p>
                  <p class=""><span>男洗手间：45%</span></p>
                  <p><span>女洗手间：50%</span></p>
                </div>
                <div class="btn-carport" (click)="openServersToiletAlert('服务区停车位监控')">
                  <p>上行停车位数据监控</p>
                  <p class=""><span>大车剩余车位：256个</span></p>
                  <p><span>小车剩余车位：318个</span></p>
                </div>
              </div>
            </div>
          </p-scrollPanel>
        </div>
      </div>
    </div>
    <!--右边-->
    <div class="right col-lg-3 col-md-3">
      <!--服务区基本信息-->
      <div class="information">
        <div class="information-title title text-center">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <p>{{serviceZoneTitle}}基本信息</p>
        </div>
        <div class="information-info" >
          <p-scrollPanel [style]="{width: '100%', height: '40vh'}" styleClass="custom">
            <!--公共属性-->
            <div class="col-lg-6 col-md-6" *ngFor="let prop of serviceInfo?.commonAttributeValues">
              <div>
                <p class="clearfix">
                  <span class="pull-left text-c1">{{prop.attributeDesc}}：</span>
                  <span class="pull-right">{{prop.value}}</span>
                </p>
              </div>
            </div>
            <!--上行属性-->
            <div class="col-lg-6 col-md-6" *ngFor="let prop of serviceInfo?.upAttributeValues.attributeValues">
              <div>
                <p class="clearfix">
                  <span class="pull-left text-c1">{{prop.attributeDesc}}：</span>
                  <span class="pull-right">{{iproptem.value}}</span>
                </p>
              </div>
            </div>
            <!--下行属性-->
            <div class="col-lg-6 col-md-6" *ngFor="let prop of serviceInfo?.downAttributeValues.attributeValues">
              <div>
                <p class="clearfix">
                  <span class="pull-left text-c1">{{prop.attributeDesc}}：</span>
                  <span class="pull-right">{{prop.value}}</span>
                </p>
              </div>
            </div>
          </p-scrollPanel>
        </div>
        <div class="information-btn text-center">
          <span (click)="crosswiseClick()">信息修改</span>
          <span (click)="openServicesPlan()">服务区平面图</span>
        </div>
      </div>
      <!--收入统计-->
      <div class="income">
        <!--实时收入-->
        <div class="income-amount">
          <div class="income-amount-title title text-center">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <p>{{serviceZoneTitle}}高速服务区实时收入</p>
          </div>
          <div class="income-amount-number">
            <p class="text-center">
              <span *ngFor="let i of incomeAmount">{{i}}</span>
              <small>元</small>
            </p>
          </div>
        </div>
        <!--收入占比-->
        <div class="income-pie">
          <div class="income-pie-title title text-center">
            <p>{{serviceZoneTitle}}当日收入类型占比分析</p>
          </div>
          <div class="income-pie-chart" echarts [options]="optionsIncomeModel" (chartClick)="incomeClick($event)"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--*************************弹窗部分**************************-->
<!--3D柱状图弹窗-->
<div class="bg-box" *ngIf="alertBarShow">
  <div class="alert-3D-bar">
    <div class="alert-3D-bar-header">
      <span>{{alertBarTitle}}</span>
      <div class="pull-right" (click)="closeBarShow()">
        <i class="fa fa-window-close " aria-hidden="true"></i>
      </div>
    </div>
    <div class="row bar3D-charts">
      <div class="col-ld-6 col-md-6">
        <div class="alert-3D-bar-bar" echarts [options]="options3dBar" (chartInit)="options3dBarInit($event)" (chartClick)="options3dBarClick($event)"></div>
      </div>
      <div class="col-ld-6 col-md-6">
        <div class="alert-3D-bar-bar" echarts [options]="options3dLine"></div>
      </div>
      <span class="toggle-btn-area-table" (click)="open3dBarExcel()">表格导出</span>
      <span class="toggle-btn-area-date" (click)="selsectDateClick()">
        <p-calendar  placeholder="选择日期......" [locale]="esDate" [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2017:2030"></p-calendar>
        选择日期
        <!--[style]="{'height':'20px','width':'50px'}"-->
      </span>

     <!-- <div class="col-ld-6 col-md-6">
        <div class="alert-3D-bar-pie" echarts [options]="options3dPie" (chartInit)="options3dPieInit($event)" ></div>
      </div>-->
    </div>
    <div class="bg-excel" *ngIf="bar3dExcelShow">
      <div class="alert-window-excel">
        <div class="alert-window-excel-header">
          <span>收入数据表格导出</span>
          <div class="pull-right" (click)="close3dBarExcel()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
        <div class="alert-window-excel-content">
          <div class="alert-window-excel-content-list">
            <label for="incomeDates">请选择时间：</label>
            <p-calendar placeholder="请选择时间......" [locale]="esDate" [(ngModel)]="date6" view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2017:2030"></p-calendar>
          </div>
          <div class="alert-window-excel-content-list">
            <label for="incomeTypesSelect">请选择类型：</label>
            <select name="" id="incomeTypesSelect" (change)="bar3dTypeChange($event)">
              <option value="">点击选择...</option>
              <option value="">所有类型</option>
              <option value="">经营收入</option>
              <option value="">驻车量</option>
              <option value="">用电量</option>
              <option value="">用水量</option>
              <option value="">客流量</option>
            </select>
          </div>
          <!--<div class="alert-window-excel-content-list">
            <label for="incomeArea">请选择片区：</label>
            <select name="" id="incomeArea" (change)="bar3dAreaChange($event)">
              <option value="">东部片区</option>
              <option value="">西部片区</option>
              <option value="">南部片区</option>
              <option value="">北部</option>
              <option value="">中部</option>
            </select>
          </div>-->

        </div>
        <div class="alert-window-excel-footer text-center">
          <span (click)="bar3dExportClick()">确认导出</span>
          <span (click)="close3dBarExcel()">取消导出</span>
        </div>
      </div>
    </div>
  </div>
</div>
<!--车辆类型弹窗-->
<div class="bg-box" *ngIf="alertCarShow">
  <div class="alert-window">
    <div class="alert-window-header">
      <div class="row">
        <div class="col-ld-12 col-md-12">
          <span>{{serviceZoneTitle}}</span>
          <div class="pull-right" (click)="closeCarShow()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="alert-window-content">
      <div class="row">
        <div class="col-ld-12 col-md-12">
          <div class="alert-window-content-table">
            <div class="toggle-btn" (click)="carBtnClick($event)">
              <button class="btn btn-info" [ngStyle]="{'background':alertCarTitle === '小车'?'black': '','margin-left': '10px'}">小车</button>
              <button class="btn btn-primary" [ngStyle]="{'background':alertCarTitle === '客车'?'black': ''}">客车</button>
              <button class="btn btn-danger" [ngStyle]="{'background':alertCarTitle === '货车'?'black': ''}">货车</button>
              <div class="toggle-btn-area pull-right" style="">
                <span (click)="openCarExcel()">表格导出</span>
              </div>
            </div>
            <div class="content-table">
              <table class="table table-bordered">
                <thead>
                <tr>
                  <th>时间段</th>
                  <th [ngStyle]="{'background':alertCarTitle === '小车'?'black': ''}">小车总数</th>
                  <th [ngStyle]="{'background':alertCarTitle === '客车'?'black': ''}">客车总数</th>
                  <th [ngStyle]="{'background':alertCarTitle === '货车'?'black': ''}">货车总数</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of carTableData">
                  <td >2018-07-29 18:31:20</td>
                  <td [ngStyle]="{'background':alertCarTitle === '小车'?'black': ''}">{{item.cart}}</td>
                  <td [ngStyle]="{'background':alertCarTitle === '客车'?'black': ''}">{{item.trucks}}</td>
                  <td [ngStyle]="{'background':alertCarTitle === '货车'?'black': ''}">{{item.bus}}</td>
                </tr>
                </tbody>
              </table>
            </div>
            <div class="bottom-pagination text-center">
              <ul class="pagination">
                <li><a class="btn btn-info">上一页</a></li>
                <li><a>共5页/第3页</a></li>
                <li><a style="padding: 3px 12px;">跳转到: <input type="number"><span style="margin-left: 10px">页</span></a></li>
                <li><a class="btn btn-warning">下一页</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-excel" *ngIf="carExcelShow">
      <div class="alert-window-excel">
        <div class="alert-window-excel-header">
          <span>车辆数据表格导出</span>
          <div class="pull-right" (click)="closeCarExcel()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
        <div class="alert-window-excel-content">
          <div class="alert-window-excel-content-list">
            <label for="vehicleDates">请选择时间：</label>
            <p-calendar id="vehicleDates" placeholder="请点击选择时间......" [locale]="esDate" [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2017:2030"></p-calendar>
          </div>
          <div class="alert-window-excel-content-list">
            <label for="carTypes">请选择类型：</label>
            <select name="" id="carTypes" (change)="carTypeChange($event)">
              <option value="">总数</option>
              <option value="">小车</option>
              <option value="">客车</option>
              <option value="">货车</option>
            </select>
          </div>
         <!-- <div class="alert-window-excel-content-list">
            <label for="carArea">请选择片区：</label>
            <select name="" id="carArea" (change)="carAreaChange($event)">
              <option value="">东部片区</option>
              <option value="">西部片区</option>
              <option value="">南部片区</option>
              <option value="">北部</option>
              <option value="">中部</option>
            </select>
          </div>-->
        </div>
        <div class="alert-window-excel-footer text-center">
          <span (click)="carExportClick()">确认导出</span>
          <span (click)="closeCarExcel()">取消导出</span>
        </div>
      </div>
    </div>
  </div>
</div>

<!--服务区店铺信息/视频弹窗-->
<div class="bg-box" *ngIf="serviceShopShow" >
  <div class="alert-window" style="height:80vh;width:80vw;margin-top: -40vh;margin-left:-40vw;">
    <div class="alert-window-header">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <span>{{serviceShopTitle}}店铺基础信息</span>
          <div class="pull-right" (click)="closeServiceShop()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="alert-window-content" style="padding-left: 15px">
      <div class="row">
        <div class="col-ld-2 col-md-2">
          <div class="shop-msg-title">
            <span>店铺基本信息</span>
          </div>
          <div class="shop-msg-content">
            <p>
              店铺名称：{{serviceShopTitle}}
            </p>
            <p>
              店铺责任人：王小花
            </p>
            <p>
              本月用电量： 125度
            </p>
            <p>本月用水量：457m³</p>
            <p>
              本月截至收入：157812元
            </p>
            <p>
              今日收入：7578元
            </p>
            <p>
              合同签订时间： 2018-09-10
            </p>
            <p>合同到期时间：2019-09-10</p>
          </div>
        </div>
        <div class="col-ld-6 col-md-6">
          <div class="shop-video-title">
            <span>店铺实时监控</span>
           <!-- <div class="pull-right" style="position: relative;">
              <span  data-toggle="dropdown">视频列表<i class="caret"></i></span>
              <ul class="dropdown-menu" style="left:100%">
                <li  *ngFor="let item of videoShopList" (click)="openMerchantVideo(item)">
                  <a href="javascript:">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    {{item?item.cameraName: '视频暂无'}}
                  </a>
                </li>
              </ul>
            </div>-->
          </div>
          <div class="shop-video-content" id="shopVideo"></div>
          <div class="shop-video-list">
            <span>商家监控视频列表：</span>
            <span *ngIf="!(videoShopList.length>0)">视频暂无</span>
            <span *ngFor="let item of videoShopList" (click)="openMerchantVideo(item)">
                {{item.cameraName}}
            </span>
          </div>
        </div>
        <div class="col-ld-4 col-md-4">
          <div class="shop-echart-title">
            <span>店家业态数据统计</span>
            <span class="table-export" (click)="serviceShopShowExport=true">表格导出</span>
          </div>
          <div class="shop-echart-content">
            <div echarts [options]="shopEchartLine" style="height: 34vh"></div>
            <div echarts [options]="shopEchartArea" style="height: 34vh"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-excel" *ngIf="serviceShopShowExport">
      <div class="alert-window-excel">
        <div class="alert-window-excel-header">
          <span>收入数据表格导出</span>
          <div class="pull-right">
            <i class="fa fa-window-close " aria-hidden="true" (click)="serviceShopShowExport=false"></i>
          </div>
        </div>
        <div class="alert-window-excel-content">
          <div class="alert-window-excel-content-list">
            <label for="vehicleDates">请选择时间：</label>
            <p-calendar id="vehicleDates" placeholder="请点击选择时间......" [locale]="esDate" [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2017:2030"></p-calendar>
          </div>
          <div class="alert-window-excel-content-list">
            <label for="carTypes">请选择类型：</label>
            <select name="" id="carTypes" (change)="carTypeChange($event)">
              <option value="">总数</option>
              <option value="">小车</option>
              <option value="">客车</option>
              <option value="">货车</option>
            </select>
          </div>
        </div>
        <div class="alert-window-excel-footer text-center">
          <button class="btn btn-primary" (click)="incomeExportClick()">确认导出</button>
          <button class="btn btn-danger" (click)="closeincomeExcel()">取消导出</button>
        </div>
      </div>
      <iframe src="" frameborder="0" style="position: absolute;top: 0;left: 0; height: 100vh;width:100vw;z-index: -1"></iframe>
    </div>
  </div>
</div>
<!--商家视频弹窗（暂时没用）-->
<div class="bg-box" *ngIf="videoAlertShow" >
  <div class="alert-window" style="height:70vh; margin-top: -35vh;">
    <div class="alert-window-header">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <span>{{videoAlertTitle}}</span>
          <div class="pull-right" (click)="closeMerchantVideo()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="alert-window-content" id ='shopWindowAlert'>
      <div class="row">
        <!-- <div class="col-ld-2 col-md-2">
           <div class="video-time">
             <form [formGroup]="selectFormModule" class="playback" (submit)="onSubmit()">
               <label for="videoDate">请选择日期：</label>
               <input formControlName="videoDate" type="date" id="videoDate" class="video-time-input">
               <label for="videoTimeStart">请选择起始时间：</label>
               <input formControlName="videoTimeStart" type="time" id="videoTimeStart" class="video-time-input">
               <label for="videoTimeFinish">请选择结束时间：</label>
               <input formControlName="videoTimeFinish" type="time" id="videoTimeFinish" class="video-time-input">
               <button type="submit" class="btn btn-primary btn-block">点击回看</button>
             </form>
             <button class="btn btn-warning btn-block">00:00</button>
             <button class="btn btn-primary btn-block">02:00</button>
             <button class="btn btn-danger btn-block">04:00</button>
             <button class="btn btn-info btn-block">06:00</button>
             <button class="btn btn-success btn-block">08:00</button>
             <button class="btn btn-default btn-block">10:00</button>
             <button class="btn btn-warning btn-block">12:00</button>
             <button class="btn btn-primary btn-block">14:00</button>
             <button class="btn btn-danger btn-block">16:00</button>
             <button class="btn btn-info btn-block">18:00</button>
             <button class="btn btn-success btn-block">20:00</button>
             <button class="btn btn-warning btn-block">22:00</button>
           </div>
         </div>-->
        <!--<div class="col-ld-6 col-md-6">
           <div class="video-play">
             <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="100%" height="100%">
               <param name='mrl' value=`${videoItem.outUrl}` />
               <param name='volume' value='50' />
               <param name='autoplay' value='true' />
               <param name='loop' value='false' />
               <param name='fullscreen' value='true' />
               <param name='controls' value='true' />
             </object>
           </div>
         </div>-->
        <!-- <div class="video-event">
           <app-timer-shaft-crosswise></app-timer-shaft-crosswise>
         </div>-->
      </div>
      <div class="vide-list col-lg-3 col-md-3">
        <div class="row">
          <div class="list-group ">
            <button *ngFor="let item of videoShopList;let i = index"  type="button" class="list-group-item" (click)="videoShopListClick(item.outUrl)">{{item.cameraName + (i+1) }}号摄像头</button>
          </div>
        </div>
      </div>
      <div class="vide-list col-lg-9 col-md-9" id="shopWindowShop">
      </div>
    </div>
    <!--<div class="bg-excel" *ngIf="incomeExcelShow">
      <div class="alert-window-excel">
        <div class="alert-window-excel-header">
          <span>收入数据表格导出</span>
          <div class="pull-right">
            <i class="fa fa-window-close " aria-hidden="true" (click)="closeincomeExcel()"></i>
          </div>
        </div>
        <div class="alert-window-excel-content">
          <div class="alert-window-excel-content-list">
            <label for="incomeDates">请选择时间：</label>
            <input type="date" id="incomeDates" (change)="incomeDateChange($event)">
          </div>
          <div class="alert-window-excel-content-list">
            <label for="incomeTypes">请选择类型：</label>
            <select name="" id="incomeTypes" (change)="incomeTypeChange($event)">
              <option value="">总数</option>
              <option value="">小车</option>
              <option value="">客车</option>
              <option value="">货车</option>
            </select>
          </div>
          <div class="alert-window-excel-content-list">
            <label for="incomeArea">请选择片区：</label>
            <select name="" id="incomeArea" (change)="incomeAreaChange($event)">
              <option value="">东部片区</option>
              <option value="">西部片区</option>
              <option value="">南部片区</option>
              <option value="">北部</option>
              <option value="">中部</option>
            </select>
          </div>

        </div>
        <div class="alert-window-excel-footer text-center">
          <button class="btn btn-primary" (click)="incomeExportClick()">确认导出</button>
          <button class="btn btn-danger" (click)="closeincomeExcel()">取消导出</button>
        </div>
      </div>
    </div>-->
  </div>
</div>
<!--服务区公共视频监控弹窗-->
<div class="bg-box" *ngIf="videoPublicShow" >
  <div class="alert-window" style="height:70vh; margin-top: -35vh;width:60vw; margin-left:-30vw">
    <div class="alert-window-header">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <span>{{publicVideoTitle}}</span>
          <div class="pull-right" (click)="closePublicVideo()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="alert-window-content">
      <div class="row">
        <!-- <div class="col-ld-2 col-md-2">
           <div class="video-time">
             <form [formGroup]="selectFormModule" class="playback" (submit)="onSubmit()">
               <label for="videoDate">请选择日期：</label>
               <input formControlName="videoDate" type="date" id="videoDate" class="video-time-input">
               <label for="videoTimeStart">请选择起始时间：</label>
               <input formControlName="videoTimeStart" type="time" id="videoTimeStart" class="video-time-input">
               <label for="videoTimeFinish">请选择结束时间：</label>
               <input formControlName="videoTimeFinish" type="time" id="videoTimeFinish" class="video-time-input">
               <button type="submit" class="btn btn-primary btn-block">点击回看</button>
             </form>
             <button class="btn btn-warning btn-block">00:00</button>
             <button class="btn btn-primary btn-block">02:00</button>
             <button class="btn btn-danger btn-block">04:00</button>
             <button class="btn btn-info btn-block">06:00</button>
             <button class="btn btn-success btn-block">08:00</button>
             <button class="btn btn-default btn-block">10:00</button>
             <button class="btn btn-warning btn-block">12:00</button>
             <button class="btn btn-primary btn-block">14:00</button>
             <button class="btn btn-danger btn-block">16:00</button>
             <button class="btn btn-info btn-block">18:00</button>
             <button class="btn btn-success btn-block">20:00</button>
             <button class="btn btn-warning btn-block">22:00</button>
           </div>
         </div>-->
        <div class="col-ld-12 col-md-12">
          <div class="video-play" [ngStyle]="{'height': '65vh'}" id="publicVideo">
            <!-- <object type='application/x-vlc-plugin' id='' width="100%" height="100%"
                     events='True'
                     pluginspage="http://www.videolan.org"
                     codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
               <param name='mrl' value='rtsp://admin:12345678a@222.85.147.216:554/Streaming/Channels/901?transportmode-unicast
 ' />
               <param name='volume' value='50' />
               <param name='autoplay' value='true' />
               <param name='loop' value='false' />
               <param value="transparent" name="wmode">
               <embed id='vlc1' wmode="transparent" type="application/x-vlc-plugin" width="100%" height="100%"
                      pluginspage="http://www.videolan.org" allownetworking="internal" allowscriptaccess="always" quality="high"
                      src="rtsp://admin:12345678a@222.85.147.216:554/Streaming/Channels/901?transportmode-unicast
 ">
             </object>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--事件弹窗-->
<div class="bg-box" *ngIf="eventAlertShow" >
  <div class="alert-window" style="height:80vh; margin-top: -40vh;">
    <div class="alert-window-header" >
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <span>服务区事件处理</span>
          <div class="pull-right" (click)="closeEventAlert()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="alert-window-content" style="padding: 10px 10px 0 10px;">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <div>
            <button class="btn" [ngStyle]="{'color':!eventAlertListShow?'black': 'white'}" [ngClass]="{'btn-primary': eventAlertListShow}" (click)="eventAlertListCtrlw()">未处理事件</button>
            <button class="btn" [ngStyle]="{'color':eventAlertListShow?'black': 'white'}" [ngClass]="{'btn-primary': !eventAlertListShow}" (click)="eventAlertListCtrly()">已处理事件</button>
          </div>
        </div>
        <div class="col-lg-8 col-md-8" *ngIf="eventAlertListShow">
          <p-scrollPanel [style]="{width: '100%', height: '65vh'}" styleClass="custom">
            <div class="table-responsive">
              <table class="table">
                <thead class="table-header">
                <tr>
                  <td>时间</td>
                  <td>事件类型</td>
                  <td>事件描述</td>
                  <td>状态</td>
                </tr>
                </thead>
                <tbody class="table-body">
                  <tr *ngFor="let item of eventListNoProcess" style="color: #00ECF1" (click)="eventListInfosClick(item)">
                    <td>{{item?.occurTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                    <td>{{item?.eventCategoryName}}</td>
                    <td>{{item?.eventDescripte}}</td>
                    <td style="color:#CF5B56">{{item?.processState===2?'未处理':'已处理'}}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </p-scrollPanel>
        </div>
        <div class="col-lg-8 col-md-8" *ngIf="!eventAlertListShow">
          <p-scrollPanel [style]="{width: '100%', height: '65vh'}" styleClass="custom">
            <div class="table-responsive">
              <table class="table event-table-untreated" cellspacing="5px">
                <thead class="table-header">
                  <tr>
                    <td>时间</td>
                    <td>事件类型</td>
                    <td>事件描述</td>
                    <td>状态</td>
                  </tr>
                </thead>
                <tbody class="table-body">
                  <tr *ngFor="let item of eventListProcess" style="color: #00ECF1" (click)="eventListInfosClick(item)">
                    <td>{{item?.occurTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                    <td>{{item?.eventCategoryName}}</td>
                    <td>{{item?.eventDescripte}}</td>
                    <td style="color: #68E868">{{item?.processState===2?'未处理':'已处理'}}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </p-scrollPanel>
        </div>
        <div class="col-lg-4 col-md-4">
          <h4>事件详情信息</h4>
          <p>
            <span style="color:#4B8FD6">事件发生时间：</span><span>{{eventListInfo?.occurTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
          </p>
          <p>
            <span style="color:#4B8FD6">事件类型：</span><span>{{eventListInfo?.eventCategoryName}}</span>
          </p>
          <p>
            <span style="color:#4B8FD6">事件发生地点：</span><span>{{eventListInfo?.eventSubject}}</span>
          </p>
          <p>
            <span style="color:#4B8FD6">事件名称：</span><span>{{eventListInfo?.eventName}}</span>
          </p>
          <p>
            <span style="color:#4B8FD6">事件描述：</span><span>{{eventListInfo?.eventDescripte}}</span>
          </p>
          <p>
            <span style="color:#4B8FD6">事件负责人：</span><span>{{eventListInfo?.principal}}</span>
          </p>
          <p>
            <span>处理状态：</span><span [ngStyle]="{'color':eventListInfo?.processState===1?'#68E868': '#C05854'}">{{eventListInfo?.processState===1?'已处理':'未处理'}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<!--上报信息 弹窗弹窗-->
<div class="bg-box" *ngIf="eventAlertInfoUp" >
  <div class="alert-window" style="height:80vh; margin-top: -40vh;">
    <div class="alert-window-header" >
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <span>{{eventAlertInfoUpTitle}}事件上报</span>
          <div class="pull-right" (click)="closeEventInfoUpClick()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="alert-window-content" style="padding: 10px 10px 0 10px;">
      <div class="row">
        <div class="col-ld-12 col-md-12">
          <form class="form-horizontal">
            <div class="form-group">
              <label for="eventName" class="col-sm-2 control-label" disabled="">事件名称：</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="eventName" name="type" [(ngModel)]="uploadEventInfoUp.eventName">
              </div>
              <label for="principal" class="col-sm-2 control-label" disabled="">责任人</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="principal" name="type" [(ngModel)]="uploadEventInfoUp.principal">
              </div>
            </div>
            <div class="form-group">
              <label for="eventSubject" class="col-sm-2 control-label" disabled="">事件发生主体：</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="eventSubject" name="type" [(ngModel)]="uploadEventInfoUp.eventSubject">
              </div>
              <label for="occurTime" class="col-sm-2 control-label" disabled="">事件发生时间</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="occurTime" name="type" [(ngModel)]="uploadEventInfoUp.occurTime">
              </div>
            </div>
            <div class="form-group">
              <label for="description" class="col-sm-2 control-label">事件描述</label>
              <div class="col-sm-10">
                <textarea type="text" class="form-control" id="description" name="description" [(ngModel)]="uploadEventInfoUp.eventDescripte"></textarea>
              </div>
            </div>
            <div class="form-group text-center style-border">
              <button class="btn btn-success" type="button" (click)="serviceInfoUpAlertClick()">上报</button>
              <button class="btn btn-danger" type="button" (click)="closeEventInfoUpClick()">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<!--(待开发)服务洗手间信息监控-->
<div class="bg-box" *ngIf="serversToiletAlertShow">
  <div class="alert-window">
    <div class="alert-window-header">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <span>{{waitTitle}}</span>
          <div class="pull-right" (click)="closeServersToiletAlert()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="alert-window-content">
      <div class="row">
        <div class="col-ld-12 col-md-12">
          <h1 class="text-center">待开发中......</h1>
        </div>
      </div>
    </div>
  </div>
</div>

<!--服务器信息修改弹窗-->
<div class="bg-box" *ngIf="alertCrosswiseShow">
  <div class="alert-window">
    <div class="alert-window-header">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <span>服务区信息修改</span>
          <div class="pull-right" (click)="closeCrosswiseShow()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="alert-window-content">
      <div class="row">
        <!--公共信息-->
        <div class="col-lg-6 col-md-6" *ngFor="let item of alterCommonAttributeValues">
          <div class="form-horizontal">
            <div class="form-group">
              <label for="name" class="col-sm-2 control-label" disabled="">{{item.attributeDesc}}</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="name" name="name" [(ngModel)]="item.value">
              </div>
            </div>
          </div>
        </div>
        <!--上行信息-->
        <div class="col-lg-6 col-md-6" *ngFor="let item of alterUpAttributeValues">
          <div class="form-horizontal">
            <div class="form-group">
              <label for="name1" class="col-sm-2 control-label" disabled="">{{item.attributeDesc}}</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="name1" name="name1" [(ngModel)]="item.value">
              </div>
            </div>
          </div>
        </div>
        <!--下行信息-->
        <div class="col-lg-6 col-md-6" *ngFor="let item of alterDownAttributeValues">
          <div class="form-horizontal">
            <div class="form-group">
              <label for="name2" class="col-sm-2 control-label" disabled="">{{item.attributeDesc}}</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="name2" name="name1" [(ngModel)]="item.value">
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-12 col-md-12">
          <div class="form-horizontal">
            <div class="form-group text-center style-border">
              <span (click)="modifySerAraItemClick()">确认修改</span>
              <span (click)="alertCrosswiseShow=false">取消修改</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--服务区平面图弹窗-->
<div class="bg-box" [hidden]="!servicesPlan" >
  <div class="alert-window" style="height:80vh; margin-top: -40vh;">
    <div class="alert-window-header">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <span>{{serviceZoneTitle}}平面图</span>
          <div class="pull-right" (click)="closeServicesPlan()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="alert-window-content">
      <div class="row">
        <div class="col-ld-12 col-md-12 text-center">
          <!-- <div class="services-plan" [ngStyle]="">
             <div class="services-plan-left pull-left">
               <div class="service-date-info-top">
                 <h5 class="text-center">服务区收入</h5>
               </div>
               <div class="service-date-info-top"></div>
               <div class="service-date-info-top"></div>
             </div>
             <div class="services-plan-right pull-right">
               <div class="service-date-info-bottom">
                 <h5 class="text-center">服务区车流</h5>
               </div>
               <div class="service-date-info-bottom"></div>
               <div class="service-date-info-bottom"></div>
             </div>
           </div>-->
          <div class="services-plan" echarts [options]="servicesMap"></div>
         <!-- <div class="services-plan" id="servicesMap"></div>-->
        </div>
      </div>
    </div>
  </div>
</div>
<!--收入类型弹窗-->
<div class="bg-box" *ngIf="alertIncomeShow">
  <div class="alert-window" style=" width: 96vw; margin-left: -48vw;">
    <div class="alert-window-header">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <span>{{serviceZoneTitle}}</span>
          <div class="pull-right" (click)="closeIncomeShow()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="alert-window-content">
      <div class="row">
       <!-- <div class="col-ld-6 col-md-6">
          <div class="alert-3D-bar-bar" echarts [options]="optionsIncomeTypes" (chartInit)="optionsIncomePieInit($event)" (chartClick)="optionsIncomePieClick($event)"></div>
        </div>-->
        <div class="col-ld-12 col-md-12">
          <div class="alert-window-content-table">
            <div class="toggle-btn" (click)="IncomeBtnClick($event)">
              <button class="btn btn-info" [ngStyle]="{'background':alertIncomeTitle === '收入总数'?'black': '','margin-left': '10px'}">收入总数</button>
              <button class="btn btn-danger" [ngStyle]="{'background':alertIncomeTitle === '小吃'?'black': ''}">小吃</button>
              <button class="btn btn-primary" [ngStyle]="{'background':alertIncomeTitle === '中式快餐'?'black': ''}">中式快餐</button>
              <button class="btn btn-success" [ngStyle]="{'background':alertIncomeTitle === '西式快餐'?'black': ''}">西式快餐</button>
              <button class="btn btn-info" [ngStyle]="{'background':alertIncomeTitle === '商超'?'black': ''}">商超</button>
              <button class="btn btn-warning" [ngStyle]="{'background':alertIncomeTitle === '住宿'?'black': ''}">住宿</button>
              <button class="btn btn-primary" [ngStyle]="{'background':alertIncomeTitle === '汽修'?'black': ''}">汽修</button>
              <div class="toggle-btn-area pull-right">
                <span (click)="openIncomeExcel()">表格导出</span>
              </div>
            </div>
            <div class="content-table">
              <table class="table table-bordered" *ngIf="!alertIncomeTypeShow">
                <thead>
                <tr>
                  <th>时间段</th>
                  <th [ngStyle]="{'background':alertIncomeTitle === '收入总数'?'black': ''}">收入总数</th>
                  <th [ngStyle]="{'background':alertIncomeTitle === '小吃'?'black': ''}">小吃(元）</th>
                  <th [ngStyle]="{'background':alertIncomeTitle === '中式快餐'?'black': ''}">中式快餐(元）</th>
                  <th [ngStyle]="{'background':alertIncomeTitle === '西式快餐'?'black': ''}">西式快餐(元）</th>
                  <th [ngStyle]="{'background':alertIncomeTitle === '商超'?'black': ''}">商超(元）</th>
                  <th [ngStyle]="{'background':alertIncomeTitle === '住宿'?'black': ''}">住宿(元）</th>
                  <th [ngStyle]="{'background':alertIncomeTitle === '汽修'?'black': ''}">汽修(元）</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of IncomeTableData">
                  <td>2018-07-29 20:28:33</td>
                  <td [ngStyle]="{'background':alertIncomeTitle === '收入总数'?'black': ''}">{{item.sum}}</td>
                  <td [ngStyle]="{'background':alertIncomeTitle === '小吃'?'black': ''}">{{item.income}}</td>
                  <td [ngStyle]="{'background':alertIncomeTitle === '中式快餐'?'black': ''}">{{item.income}}</td>
                  <td [ngStyle]="{'background':alertIncomeTitle === '西式快餐'?'black': ''}">{{item.income}}</td>
                  <td [ngStyle]="{'background':alertIncomeTitle === '商超'?'black': ''}">{{item.income}}</td>
                  <td [ngStyle]="{'background':alertIncomeTitle === '住宿'?'black': ''}">{{item.income}}</td>
                  <td [ngStyle]="{'background':alertIncomeTitle === '汽修'?'black': ''}">{{item.income}}</td>
                </tr>
                </tbody>
              </table>
              <table class="table table-bordered" *ngIf="alertIncomeTypeShow">
                <thead>
                <tr>
                  <th>时间段</th>
                  <th>{{alertIncomeTypeTitle}}（元）</th>
                  <th>妹妹小吃饭店1</th>
                  <th>妹妹小吃饭店2</th>
                  <th>妹妹小吃饭店3</th>
                  <th>妹妹小吃饭店4</th>
                  <th>妹妹小吃饭店5</th>
                  <th>妹妹小吃饭店6</th>
                  <th>妹妹小吃饭店7</th>
                  <th>妹妹小吃饭店8</th>
                  <th>妹妹小吃饭店9</th>
                  <th>妹妹小吃饭店10</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of IncomeTableData;let i = index">
                  <td>2018-07-29 20:28:33</td>
                  <td>{{item.sum}}</td>
                  <td>{{item.income}}</td>
                  <td>{{item.income}}</td>
                  <td>{{item.income}}</td>
                  <td>{{item.income}}</td>
                  <td>{{item.income}}</td>
                  <td>{{item.income}}</td>
                  <td>{{item.income}}</td>
                  <td>{{item.income}}</td>
                  <td>{{item.income}}</td>
                  <td>{{item.income}}</td>
                </tr>
                </tbody>
              </table>
            </div>
            <div class="bottom-pagination text-center">
              <ul class="pagination">
                <li><a class="btn btn-info">上一页</a></li>
                <li><a>共5页/第3页</a></li>
                <li><a style="padding: 3px 12px;">跳转到: <input type="number"><span style="margin-left: 10px">页</span></a></li>
                <li><a class="btn btn-warning">下一页</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-excel" *ngIf="incomeExcelShow">
      <div class="alert-window-excel">
        <div class="alert-window-excel-header">
          <span>收入数据表格导出</span>
          <div class="pull-right" (click)="closeincomeExcel()">
            <i class="fa fa-window-close " aria-hidden="true"></i>
          </div>
        </div>
        <div class="alert-window-excel-content">
          <div class="alert-window-excel-content-list">
            <label for="incomeDates">请选择时间：</label>
            <p-calendar id="incomeDates" placeholder="请点击选择时间......" [locale]="esDate" [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2017:2030"></p-calendar>
          </div>
          <div class="alert-window-excel-content-list">
            <label for="incomeTypesSelect">请选择类型：</label>
            <select name="" id="incomeTypesSelect" (change)="incomeTypeChange($event)">
              <option value="">总数</option>
              <option value="">小车</option>
              <option value="">客车</option>
              <option value="">货车</option>
            </select>
          </div>
         <!-- <div class="alert-window-excel-content-list">
            <label for="incomeArea">请选择片区：</label>
            <select name="" id="incomeArea" (change)="incomeAreaChange($event)">
              <option value="">东部片区</option>
              <option value="">西部片区</option>
              <option value="">南部片区</option>
              <option value="">北部</option>
              <option value="">中部</option>
            </select>
          </div>-->
        </div>
        <div class="alert-window-excel-footer text-center">
          <span (click)="incomeExportClick()">确认导出</span>
          <span (click)="closeincomeExcel()">取消导出</span>
        </div>
      </div>
    </div>
  </div>
</div>
















